<template>
  <div class="order">
    <!-- 傲 订单页 静态页面 -->
    <!-- 顶部搜索框 -->
    <div class="header-top">
      <div class="search">
        <input
          type="text"
          name=""
          id=""
          class="s-input"
          placeholder="搜索我的订单"
        />
      </div>
    </div>

    <!-- 切换项 -->
    <mt-navbar v-model="orderSelected" fixed style="top: 40px">
      <mt-tab-item id="1">当前订单</mt-tab-item>
      <mt-tab-item id="2">历史订单</mt-tab-item>
    </mt-navbar>
    <!-- 订单 -->
    <mt-tab-container v-model="orderSelected" class="order-tab">
      <!-- 当前订单 -->
      <mt-tab-container-item id="1">
        <!-- <router-link to="/details?"> -->
        <div
          class="current order mb-4"
          v-for="(item, i) of orderlistOne"
          :key="i"
          @click="openOneDedail(i)"
        >
          <div class="row">
            <div class="col-8 mt-2">
              <h6>{{ item.storeName }}</h6>
              <p>{{ item.createAt.slice(0, 19).replace("T", " ") }}</p>
            </div>
            <div class="col-4">
              <h6>{{ item.orderStatus == 0 ? "待支付" : "已支付" }}</h6>
            </div>
            <div class="col-8">
              <img
                v-for="(imgs, j) of item.orderDetailsList"
                :key="j"
                :src="`${imgs.cover_img}`"
              />
            </div>
            <div class="col-4">
              <div>
                <h6>￥{{ item.totalPrice.toFixed(2) }}</h6>
                <p>共{{ item.shopCount }}件</p>
              </div>
            </div>
            <div class="col-12 mb-2">
              <van-button color="#F4A460" plain size="mini"
                >再来一单</van-button
              >
            </div>
          </div>
        </div>
        <van-empty
          image="https://img2.baidu.com/it/u=2322445088,2125875301&fm=26&fmt=auto&gp=0.jpg"
          description="没有更多了~~"
        />
      </mt-tab-container-item>
      <!-- 历史订单 -->
      <mt-tab-container-item id="2">
        <!-- <router-link to="/details"> -->
        <div
          class="old order mb-4"
          v-for="(item, i) of orderlistTwo"
          :key="i"
          @click="openTwoDedail(i)"
        >
          <div class="row">
            <div class="col-8 mt-2">
              <h6>{{ item.storeName }}</h6>
              <p>{{ item.createAt.slice(0, 19).replace("T", " ") }}</p>
            </div>
            <div class="col-4">
              <h6>{{ item.orderStatus == 2 ? "已完成" : "已取消" }}</h6>
            </div>
            <div class="col-8">
              <img
                v-for="(imgs, j) of item.orderDetailsList"
                :key="j"
                :src="`${imgs.cover_img}`"
              />
            </div>
            <div class="col-4">
              <div>
                <h6>￥{{ item.totalPrice.toFixed(2) }}</h6>
                <p>共{{ item.shopCount }}件</p>
              </div>
            </div>
            <div class="col-12 mb-2">
              <van-button color="#F4A460" plain size="mini"
                >删除订单</van-button
              >
              <van-button color="#F4A460" plain size="mini"
                >再来一单</van-button
              >
            </div>
          </div>
        </div>
        <!-- </router-link> -->

        <van-empty
          image="https://img2.baidu.com/it/u=2322445088,2125875301&fm=26&fmt=auto&gp=0.jpg"
          description="没有更多了~~"
        />
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import Bus from "../assets/js/bus";
import OrderDetailsVue from "../testing/OrderDetails.vue";
import { mapState, mapGetters } from "vuex";

export default {
  components: {},
  data() {
    return {
      orderSelected: "1",
      orderlistOne: [], //当前订单
      orderlistTwo: [], //历史订单
      orderOneID: null, //当前订单的每个订单号
      orderTwoID: null, //历史订单的每个订单号
    };
  },
  methods: {
    openOneDedail(i) {
      this.$router.push("/details");
      this.orderOneID = this.orderlistOne[i].orderId;
      console.log(this.orderOneID);
      // 传参
      setTimeout(() => {
        Bus.$emit("sendToOneDetail", this.orderOneID);
      }, 100);
    },
    openTwoDedail(i) {
      this.$router.push("/details");
      this.orderTwoID = this.orderlistTwo[i].orderId;
      console.log(this.orderTwoID);
      // 传参
      setTimeout(() => {
        Bus.$emit("sendToTwoDetail", this.orderTwoID);
      });
    },
  },
  // 结构变量
  computed: {
    ...mapState(["addressDetail", "userId", "isLogin"]),
  },
  mounted() {
    // 测试
    // console.log(this.isLogin );

    if (this.isLogin == null) {
      // alert('请先登录');
    } else {
      // 得到用户订单列表 未完成
      let order = []; //所有订单
      this.axios.get("/api/order/getAll").then((result) => {
        console.log(result.data.data);
        if (result.data.code == 200) {
          order = result.data.data;
          //console.log(order); //[{0},{1}]
        }
        //区别订单状态0和1
        let orderlistOne = [];
        for (let item of order) {
          //console.log(item);
          // 订单状态 0-待支付(5min未支付变3) 1-已支付待取货 2-已完成 3-已取消
          if (item.orderStatus == 0 || item.orderStatus == 1) {
            orderlistOne.push(item);
          }
        }
        //console.log(orderlistOne);
        this.orderlistOne = orderlistOne;

        //5min后，状态为0的订单修改为状态3
        let timer = setTimeout(function () {
          for (let item of this.orderlistOne) {
            if (item.orderStatus == 0) {
              item.orderStatus == 3;
            }
          }
        }, 300000);

        //区别订单状态2和3
        let orderlistTwo = [];
        for (let item of order) {
          //console.log(item);
          // 订单状态 0-待支付(5min未支付变3) 1-已支付待取货 2-已完成 3-已取消
          if (item.orderStatus == 2 || item.orderStatus == 3) {
            orderlistTwo.push(item);
          }
        }
        //console.log(orderlistTwo);
        this.orderlistTwo = orderlistTwo;
      });
    }
  },
};
</script>

<style lang="scss" scoped>
body{
  background-color: #f8f9fa;
}

//iphone 5
@media screen and (min-width: 320px) {
  .current > div > :last-child {
    left: 70%;
  }

  .old > div > :last-child {
    left: 50%;
  }
}
// iphone 6/7/8
@media screen and (min-width: 375px) {
  .order > div > :last-child {
    left: 75%;
  }
  .old > div > :last-child {
    left: 58%;
  }
}
//iphone 6/7/8 p
@media screen and (min-width: 414px) {
  .order > div > :last-child {
    left: 75%;
  }

  .old > div > :last-child {
    left: 60%;
  }
}

a {
  text-decoration: none;
  color: black;
}

.header-top {
  background-color: #fff;
  .search {
    height: 31px;
    margin: 5px auto;
    width: 95%;
    border: 1px solid #ff8c00;
    background-color: white;
    border-radius: 15px;
    .s-input {
      border: 0;
      outline: none;
      position: relative;
      top: 2px;
      left: 10%;
    }
  }
}

// 中间内容布局
.order-tab {
  position: fixed;
  overflow-y: scroll;
  top: 86px;
  bottom: 55px;
  left: 0;
  right: 0;

  .order {
    width: 92%;
    margin: 0 auto;
    background-color: white;
    margin-top: 15px;
    border-radius: 15px;
    padding-left: 10px;
    // box-shadow: 0px 1px 0px lightgray;
    border-bottom: 1px solid #ebebeb;
    & p {
      font-size: 12px;
    }
    & img {
      display: block;
      width: 15vh;
      border: 1px solid #fff;
    }
    & > div > :nth-child(2n) {
      text-align: center;
      position: relative;
      & > h6 {
        margin-top: 20%;
      }
      & > div {
        height: 50px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    & > div > :last-child {
      position: relative;
    }
  }
}
</style>